<template>
  <form @submit.prevent="handleSubmit" class="register_container">

    <h1>用户注册</h1>

    <div>
      <label for="username">账号：</label>
      <input type="text" id="username" 
        v-model="form.username"
        placeholder="请输入用户名"
      />
    </div>

    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" 
        v-model="form.password"
        placeholder="请输入密码"
      />
    </div>

    <div>
      <label for="nickname">昵称：</label>
      <input type="text" id="nickname" 
        v-model="form.nickname"
        placeholder="请输入昵称"
      />
    </div>

    <div>
      <label for="email">邮箱：</label>
      <input type="text" id="email" 
        v-model="form.email"
        placeholder="请输入邮箱"
      />
    </div>

    <div>
      <label for="phone">手机号</label>
      <input type="text" id="phone" 
        v-model="form.phone"
        placeholder="请输入手机号"
      />
    </div>

    <div>
      <label for="phone">性别：</label>
      <label>
        <input type="radio" v-model="form.sex" :value="0"/> 男
      </label>
      <label>
        <input type="radio" v-model="form.sex" :value="1"/> 女
      </label>
    </div>

    <div>
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '注册中...' : '立即注册' }}
      </button>
    </div>
  </form>

  <button class="upload" @click="showModal = true">上传图片</button>
  <FileForm 
    v-model:visible="showModal"
    @upload-success="handleUploadSuccess"
  />
</template>

<script setup>
import { ref } from 'vue';
import { register } from '@/api/BlogAuth';
import FileForm from '@/components/FileForm.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const isSubmitting = ref(false);


const showModal = ref(false);

const handleUploadSuccess = (url) => {
  form.value.avatar = url;
  alert("上传成功: "+ url);
};


const form = ref({
  username: '',
  password: '',
  nickname: '',
  email: '',
  phone: '',
  sex: '0',
  avatar: 'http://127.0.0.1:48080/public/visit/4/get/ab17205bdcd64409a23bb64569839b09.png'
});

const handleSubmit = async () => {

  isSubmitting.value = true;
  
  try {
    
    await register(form.value).then((res)=>{
      console.log(res.data)
      if(res.data.code==0){
        alert('注册成功');
        setTimeout(() => {
          router.push('/login');
        }, 1000);
      }else{
        alert('注册失败: '+res.data.msg);
      }
    });
    
  } catch (error) {

    alert('注册失败'+error);

  } finally {

    isSubmitting.value = false;

  }
};
</script>

<style scoped>
.register_container {
  display: flex; flex-flow: column nowrap;
  align-items: center;justify-content: space-evenly;
  width: 400px;height: 500px; margin: 150px auto 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}




h1 {
  margin: 0;
  text-align: center;
}

label {
  font-weight: 500;
  color: #555;
}

input[type="text"],
input[type="password"] {
  padding: 0.75rem;width: 230px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

button{
  padding: 0.75rem;
  background-color: #646cff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}
button.upload{
  display: block;
  margin: 20px auto;
}

button:hover {
  background-color: #535bf2;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>